import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'web_bottombar.dart';
import '../../service/toast_service.dart';
import 'provider/loading_notifier.dart';
import 'provider/progress_notifier.dart';

class WebPage extends ConsumerStatefulWidget {
  final Map<String, String>? arguments;
  const WebPage({super.key, required this.arguments});

  @override
  ConsumerState<WebPage> createState() => WebPageState();
}

class WebPageState extends ConsumerState<WebPage> {
  late WebViewController _controller;
  String url = '';

  @override
  void initState() {
    super.initState();

    initWebController();
  }

  @override
  void dispose() {
    super.dispose();
  }

  Future<bool> goBack() async {
    if (await _controller.canGoBack()) {
      await _controller.goBack();
      return true;
    }
    return false;
  }

  void initWebController() {
    String? url = widget.arguments?['url'];
    if (url == null || url.isEmpty) {
      ToastService.showToast(msg: 'url format error');
      return;
    }
    _controller = WebViewController();

    _controller.setNavigationDelegate(NavigationDelegate(onPageStarted: (_) {
      var notifier = ref.read(loadingNotifierProvider.notifier);
      notifier.updateState(loading: true);
    }, onPageFinished: (_) {
      var notifier = ref.read(loadingNotifierProvider.notifier);
      notifier.updateState(loading: false);
    }, onProgress: (progress) {
      var notifier = ref.read(progressNotifierProvider.notifier);
      notifier.updateState(progress: progress.toDouble() / 100);
    }));
    _controller.loadRequest(Uri.parse(url));
  }

  // 加载进度条指示器
  Widget get progressIndicator {
    double width = MediaQuery.of(context).size.width;
    return Consumer(builder: (context, ref, child) {
      double progress = ref.watch(progressNotifierProvider);
      return AnimatedContainer(
          color: Colors.blue.shade300,
          width: width * progress,
          height: 2.0.h,
          duration: const Duration(milliseconds: 240));
    });
  }

  Widget content(bool loading) {
    return Stack(children: [
      Container(
          color: Colors.grey.shade50,
          width: double.infinity,
          height: double.infinity),
      SafeArea(
          top: false,
          child: Column(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Expanded(child: WebViewWidget(controller: _controller)),
                if (loading) progressIndicator,
                SizedBox(
                  width: double.infinity,
                  height: 50.0.h,
                  child: WebBottombar(onBack: goBack),
                )
              ])),
      if (loading) const Center(child: CircularProgressIndicator())
    ]);
  }

  @override
  Widget build(BuildContext context) {
    return Consumer(builder: (context, ref, child) {
      bool loading = ref.watch(loadingNotifierProvider);
      return content(loading);
    });
  }
}
